<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--
    1. Vuex的store中的state是响应式的, 当state中的数据发生改变时, Vue组件会自动更新.
        - state的数据，比如info，里面的每个属性，name，age都对应一个观察者模式：Dep -> [Watcher]
          它会观察你的数据有没有变化，一旦发现有变化它会看一下有哪些地方会根据我们的数据变化需要刷新界面的
          一个Watcher对应一个组件，有几个组件关联了info里的数据，就有几个Watcher
         state：{
            info：{
               name：‘颠三倒四’， Dep -> [Watcher]
               age：18          Dep -> [Watcher]
            }
         }
         
   2. 这就要求我们必须遵守一些Vuex对应的规则:
       - 一开始就在store中定义好所需的属性.这些属性都会被加入到响应式系统中，而响应式系统会监听属性的变化
          当属性发生变化时，会通知所有界面中用到该属性的地方，让界面发生刷新
       - 当给state中的对象添加新属性时, 使用下面的方式:
          方式一: 使用Vue.set(obj, 'newProp', 123)
          方式二: 用新对象给旧对象重新赋值
          
      updateInfo(state){
      // 更改info里的属性值，是响应式的
      // state.info.name='龚俊和张哲瀚的粉丝'
      // 增加info里的属性,以下方法增加不是响应式的
      //  state.info['address']='中国'
      // 增加info里的属性，使用vue.set(要修改的对象,新增的属性名，新增的属性值)是响应式的
      // Vue.set(state.info,'address','中国')
      // 删除info的一个属性，使用以下方法不是响应式的
      // delete state.info.age
      // 删除info的一个属性,使用Vue.delete(要删除的对象，要删除的属性名)是响应式的
       Vue.delete(state.info,'age')
    }

-->
</body>
</html>